<template>
  <div class="search-container">
    <div
      class="card-item"
      v-for="item in list"
      :style="{ backgroundImage: `url(${item.imgUrl})` }"
      @click="router.push(item.routerPath)"
    >
      <div>{{ item.title }}</div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import imgUrl from "@/assets/imgs/cat01.jpg";
import dogImgUrl from "@/assets/imgs/dog01.png";
import { useRouter } from "vue-router";

const router = useRouter();

const list = ref([
  {
    title: "猫猫管理",
    imgUrl: imgUrl,
    routerPath: "searchChannel?type=cat",
  },
  {
    title: "狗狗管理",
    imgUrl: dogImgUrl,
    routerPath: "searchChannel?type=dog",
  },
]);
</script>

<style scoped lang="scss">
.search-container {
  height: 100%;
  display: flex;
  flex-direction: column;

  .card-item {
    height: 120px;
    font-size: 22px;
    line-height: 120px;
    text-indent: 1.5em;
    color: #fff;
    font-weight: bold;
    text-shadow: 0 0 1px #000;
    cursor: pointer;
    background-size: cover;
    margin-bottom: 15px;

    &:hover {
      box-shadow: 0 0 0 2px #0ff;
    }
  }
}
</style>
